<template>
  <div class="chat_popover-content">
    <audio class="audio_item" @ended="playEnd" @loadeddata="load(chatMsg)" :src="chatMsg.message" preload="auto">{{$t('webchat.notSupport')}}</audio>
    <!-- sdk的传值和微信语音的传值不同 -->
    <div v-if="chatMsg.platform === 'sdk'">
      <!-- in和out的语音展示不同 -->
      <div class="audio_play" v-if="chatMsg.type === 'out'">
        <!-- gif和png的展示不同 -->
        <span v-if="playShow">
          <span class="audio_len muted">{{chatMsg.voiceSecond}}"</span><img src="./img/voice1.gif" class="audio_img">
        </span>
        <span v-else>
          <span class="audio_len muted">{{chatMsg.voiceSecond}}"</span><img src="./img/voice.png" class="audio_img audio_img_transfer">
        </span>
      </div>
      <div class="audio_play" v-else>
        <span v-if="playShow">
          <img src="./img/voice2.gif" class="audio_img"><span class="audio_len muted">{{chatMsg.voiceSecond}}"</span>
        </span>
        <span v-else>
          <img src="./img/voice.png" class="audio_img"><span class="audio_len muted">{{chatMsg.voiceSecond}}"</span>
        </span>
      </div>
    </div>
    <div v-else>
      <div class="audio_play" v-if="chatMsg.type === 'out'">
        <span v-if="playShow">
          <span class="audio_len muted"></span><img src="./img/voice1.gif" class="audio_img">
        </span>
        <span v-else>
          <span class="audio_len muted"></span><img src="./img/voice.png" class="audio_img audio_img_transfer">
        </span>
      </div>
      <div class="audio_play" v-else>
        <span v-if="playShow">
          <img src="./img/voice2.gif" class="audio_img"><span class="audio_len muted"></span>
        </span>
        <span v-else>
          <img src="./img/voice.png" class="audio_img"><span class="audio_len muted"></span>
        </span>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import * as types from '@/store/modules/webchat/mutation-types.js'
  export default {
    name: 'WebchatChatVoice',
    data () {
      return {
        playShow: false,
        lastPlayTime: 0,
        currentTime: 0
      }
    },
    props: {
      chatMsg: Object,
      chatFlag: String
    },
    watch: {
      playFlag (cur, pre) {
        this.changePlay()
      }
    },
    computed: {
      playFlag () {
        return this.chatMsg.play
      }
    },
    methods: {
      changePlay () {
        this.currentTime = Date.now()
        if ((this.currentTime - this.lastPlayTime) < 300) {
          return
        }
        if (this.playFlag) {
          this.playShow = true
          this.$el.getElementsByClassName('audio_item')[0].play()
        } else {
          this.playShow = false
          this.$el.getElementsByClassName('audio_item')[0].pause()
          this.$el.getElementsByClassName('audio_item')[0].currentTime = 0
        }
        this.lastPlayTime = Date.now()
      },
      playEnd () {
        let arr = this.$route.path.split('/')
        let tabType = arr[3]
        let _id = arr[4]
        this.playShow = false
        this.$store.commit(types.SET_CHAT_VOICE_PLAY, {tabType: tabType, _id: _id, when: this.chatMsg.when, data: false, flag: this.chatFlag})
      },
      load (data) {
        let audio = this.$el.getElementsByTagName('audio')[0]
        let timeLen = audio.duration
        timeLen = Math.ceil(parseFloat(timeLen))
        if (data.platform !== 'sdk') {
          this.$el.getElementsByClassName('audio_len')[0].innerText = `${timeLen}"`
        }
//        let _content = this.$el.getElementsByClassName('chat_popover-content')[0]
//        let w = _content.style.width
//        if (timeLen > 1) {
//          w += Math.ceil(timeLen * 5)
//          w = w > 360 ? 360 : w
//          _content.style.width = w
//        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .audio_default,.audio_play
    img
      vertical-align middle
    span
      vertical-align middle
  .audio_img_transfer
    transform rotateY(180deg)
  .audio_img
    width 16px
    margin 0 8px
</style>
